<template>
  <div class="help-page">
    <!-- 头部横幅 -->
    <div class="bg-gradient-to-r from-purple-600 to-pink-600 text-white py-16">
      <div class="container-custom">
        <h1 class="text-4xl font-bold mb-4">帮助中心</h1>
        <p class="text-xl opacity-90">快速找到您需要的帮助信息</p>
      </div>
    </div>

    <div class="container-custom py-12">
      <!-- 搜索框 -->
      <div class="max-w-2xl mx-auto mb-12">
        <div class="relative">
          <input
            v-model="searchQuery"
            type="text"
            placeholder="搜索问题..."
            class="input w-full pl-12 pr-4 py-4"
          />
          <div class="i-mdi-magnify absolute left-4 top-1/2 -translate-y-1/2 text-2xl text-gray-400" />
        </div>
      </div>

      <!-- 常见问题分类 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
        <button
          v-for="cat in categories"
          :key="cat.id"
          class="card text-left hover:shadow-lg transition-shadow"
          :class="{ 'border-2 border-blue-500': activeCategory === cat.id }"
          @click="activeCategory = cat.id"
        >
          <div class="flex items-start space-x-4">
            <div class="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
              :class="cat.bgColor">
              <div :class="[cat.icon, 'text-2xl', cat.iconColor]" />
            </div>
            <div>
              <h3 class="font-bold text-gray-900 mb-1">{{ cat.name }}</h3>
              <p class="text-sm text-gray-600">{{ cat.count }} 个问题</p>
            </div>
          </div>
        </button>
      </div>

      <!-- 问题列表 -->
      <div class="max-w-4xl mx-auto">
        <h2 class="text-2xl font-bold text-gray-900 mb-6">
          {{ currentCategory?.name || '全部问题' }}
        </h2>

        <div class="space-y-4">
          <div
            v-for="(item, index) in filteredQuestions"
            :key="index"
            class="card"
          >
            <button
              class="w-full text-left flex items-start justify-between"
              @click="toggleQuestion(index)"
            >
              <h3 class="font-semibold text-gray-900 pr-4">
                Q: {{ item.question }}
              </h3>
              <div
                :class="[
                  'i-mdi-chevron-down text-2xl text-gray-400 transition-transform flex-shrink-0',
                  { 'rotate-180': openQuestions.includes(index) }
                ]"
              />
            </button>
            
            <Transition name="expand">
              <div v-if="openQuestions.includes(index)" class="mt-4 pt-4 border-t border-gray-200">
                <p class="text-gray-600 whitespace-pre-line">A: {{ item.answer }}</p>
              </div>
            </Transition>
          </div>
        </div>

        <!-- 无结果提示 -->
        <div v-if="filteredQuestions.length === 0" class="text-center py-12">
          <div class="i-mdi-help-circle text-6xl text-gray-300 mb-4" />
          <p class="text-gray-500">未找到相关问题</p>
        </div>
      </div>

      <!-- 联系客服 -->
      <div class="max-w-4xl mx-auto mt-12">
        <div class="card bg-gradient-to-r from-blue-600 to-purple-600 text-white text-center">
          <div class="i-mdi-headset text-5xl mb-4" />
          <h2 class="text-2xl font-bold mb-2">没有找到答案？</h2>
          <p class="text-lg mb-6 opacity-90">
            联系我们的客服团队，我们会尽快为您解答
          </p>
          <div class="flex flex-wrap justify-center gap-4">
            <NuxtLink to="/contact" class="btn bg-white text-blue-600 hover:bg-gray-100">
              联系客服
            </NuxtLink>
            <a href="mailto:support@codevault.com" class="btn-outline border-white text-white hover:bg-white hover:text-blue-600">
              发送邮件
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const searchQuery = ref('')
const activeCategory = ref('')
const openQuestions = ref<number[]>([])

const categories = [
  {
    id: 'account',
    name: '账号相关',
    icon: 'i-mdi-account',
    iconColor: 'text-blue-600',
    bgColor: 'bg-blue-100',
    count: 8
  },
  {
    id: 'purchase',
    name: '购买与支付',
    icon: 'i-mdi-shopping',
    iconColor: 'text-green-600',
    bgColor: 'bg-green-100',
    count: 12
  },
  {
    id: 'download',
    name: '下载与使用',
    icon: 'i-mdi-download',
    iconColor: 'text-purple-600',
    bgColor: 'bg-purple-100',
    count: 10
  },
  {
    id: 'membership',
    name: '会员服务',
    icon: 'i-mdi-crown',
    iconColor: 'text-yellow-600',
    bgColor: 'bg-yellow-100',
    count: 6
  },
  {
    id: 'refund',
    name: '退款与售后',
    icon: 'i-mdi-cash-refund',
    iconColor: 'text-orange-600',
    bgColor: 'bg-orange-100',
    count: 7
  },
  {
    id: 'other',
    name: '其他问题',
    icon: 'i-mdi-help-circle',
    iconColor: 'text-gray-600',
    bgColor: 'bg-gray-100',
    count: 5
  }
]

const questions = [
  // 账号相关
  {
    category: 'account',
    question: '如何注册账号？',
    answer: '点击页面右上角的"登录"按钮，然后选择"立即注册"，填写用户名、邮箱和密码即可完成注册。注册成功后会自动登录。'
  },
  {
    category: 'account',
    question: '忘记密码怎么办？',
    answer: '在登录页面点击"忘记密码"，输入注册时使用的邮箱，系统会发送重置密码链接到您的邮箱。点击链接即可重置密码。'
  },
  {
    category: 'account',
    question: '如何修改个人资料？',
    answer: '登录后点击右上角头像，选择"账户设置"，在个人资料页面可以修改用户名、头像、个人简介等信息。'
  },
  {
    category: 'account',
    question: '可以绑定第三方账号吗？',
    answer: '目前支持GitHub、微信、QQ等第三方账号绑定。在账户设置中找到"账号绑定"选项，按照提示完成绑定即可。'
  },
  
  // 购买与支付
  {
    category: 'purchase',
    question: '支持哪些支付方式？',
    answer: '我们支持支付宝、微信支付两种支付方式。您可以在结算页面选择适合的支付方式完成支付。'
  },
  {
    category: 'purchase',
    question: '购买后如何查看订单？',
    answer: '登录后点击右上角头像，选择"我的订单"即可查看所有订单记录，包括订单状态、支付时间、订单金额等详细信息。'
  },
  {
    category: 'purchase',
    question: '可以开具发票吗？',
    answer: '可以。购买成功后在订单详情页面申请发票，填写发票抬头和税号等信息，我们会在3个工作日内开具电子发票并发送到您的邮箱。'
  },
  {
    category: 'purchase',
    question: '购物车有效期是多久？',
    answer: '购物车中的商品会保存7天。超过7天未购买的商品会自动清除。建议您及时完成购买。'
  },
  {
    category: 'purchase',
    question: '有优惠活动吗？',
    answer: '我们定期举办各种优惠活动，包括新人优惠、节日促销、会员专享折扣等。关注首页公告或订阅邮件通知获取最新活动信息。'
  },
  
  // 下载与使用
  {
    category: 'download',
    question: '购买后如何下载源码？',
    answer: '购买成功后，在"我的订单"或"我的下载"页面找到对应商品，点击"下载"按钮即可下载源码压缩包。'
  },
  {
    category: 'download',
    question: '下载的源码可以商用吗？',
    answer: '大部分源码支持商用，具体以商品详情页说明为准。购买前请仔细阅读商品的授权协议。如有疑问，可咨询客服。'
  },
  {
    category: 'download',
    question: '源码有使用文档吗？',
    answer: '所有源码都包含详细的使用文档，包括环境配置、安装步骤、功能说明等。下载后解压即可查看。'
  },
  {
    category: 'download',
    question: '源码可以重复下载吗？',
    answer: '可以。购买后的源码支持多次下载，没有次数限制。您可以随时在"我的下载"页面重新下载。'
  },
  {
    category: 'download',
    question: '源码运行遇到问题怎么办？',
    answer: '首先查看源码附带的使用文档和常见问题说明。如仍无法解决，可以：\n1. 在商品详情页留言咨询\n2. 联系客服获取技术支持\n3. VIP/SVIP会员享受优先技术支持'
  },
  
  // 会员服务
  {
    category: 'membership',
    question: '会员有哪些等级？',
    answer: '我们提供三个会员等级：\n1. 免费会员：基础功能\n2. VIP会员（¥199/年）：8折优惠、每月3次免费下载\n3. SVIP会员（¥599/年）：6折优惠、每月10次免费下载、专属技术顾问'
  },
  {
    category: 'membership',
    question: '如何开通会员？',
    answer: '点击导航栏的"会员服务"，选择合适的会员等级，点击"立即开通"按钮，完成支付即可开通会员。'
  },
  {
    category: 'membership',
    question: '会员有效期是多久？',
    answer: 'VIP和SVIP会员有效期均为1年（365天）。到期后可以续费，续费会员享受老用户专属优惠。'
  },
  {
    category: 'membership',
    question: '会员可以升级吗？',
    answer: '可以。VIP会员可随时升级至SVIP，只需补足差价即可。升级后有效期从升级日起重新计算。'
  },
  {
    category: 'membership',
    question: '免费下载配额如何使用？',
    answer: '每月自动刷新配额。VIP每月3次，SVIP每月10次。未使用的配额不会累计到下月。在商品详情页选择"使用会员配额下载"即可。'
  },
  
  // 退款与售后
  {
    category: 'refund',
    question: '什么情况下可以申请退款？',
    answer: '以下情况可申请退款：\n1. 购买后未下载的商品，7天内可申请退款\n2. 商品描述与实际严重不符\n3. 源码存在重大缺陷且无法修复\n注意：已下载的商品一般不支持退款。'
  },
  {
    category: 'refund',
    question: '如何申请退款？',
    answer: '在"我的订单"页面找到对应订单，点击"申请退款"，填写退款原因并提交。我们会在3个工作日内审核，审核通过后1-3个工作日内退款到原支付账户。'
  },
  {
    category: 'refund',
    question: '退款需要多久到账？',
    answer: '退款申请审核通过后，款项会在1-3个工作日内退回到原支付账户。具体到账时间取决于支付平台的处理速度。'
  },
  {
    category: 'refund',
    question: '会员可以退款吗？',
    answer: '会员开通后7天内未使用任何会员特权（如免费下载配额、会员折扣等）可申请退款。使用后不支持退款。'
  },
  
  // 其他问题
  {
    category: 'other',
    question: '平台收取手续费吗？',
    answer: '购买商品时标注的价格即为最终价格，不收取额外手续费。会员费用也是明码标价，无隐藏收费。'
  },
  {
    category: 'other',
    question: '如何成为源码供应商？',
    answer: '如果您有高质量的源码想要出售，可以通过"联系我们"页面提交申请。我们会评估您的源码质量，通过后会与您签订供应商协议。'
  },
  {
    category: 'other',
    question: '平台是否保护版权？',
    answer: '我们非常重视版权保护。所有上架源码都需要提供版权证明。如发现侵权行为，请及时联系我们，我们会立即下架并追究责任。'
  },
  {
    category: 'other',
    question: '有移动端App吗？',
    answer: '目前我们的网站已经过移动端优化，可以在手机浏览器中流畅使用。独立App正在开发中，敬请期待。'
  }
]

const currentCategory = computed(() => {
  return categories.find(cat => cat.id === activeCategory.value)
})

const filteredQuestions = computed(() => {
  let result = questions

  // 按分类筛选
  if (activeCategory.value) {
    result = result.filter(q => q.category === activeCategory.value)
  }

  // 按搜索关键词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(q => 
      q.question.toLowerCase().includes(query) || 
      q.answer.toLowerCase().includes(query)
    )
  }

  return result
})

function toggleQuestion(index: number) {
  const idx = openQuestions.value.indexOf(index)
  if (idx > -1) {
    openQuestions.value.splice(idx, 1)
  } else {
    openQuestions.value.push(index)
  }
}

useSeoMeta({
  title: '帮助中心 - 代码小库',
  description: '代码小库帮助中心，提供账号注册、购买支付、下载使用、会员服务等常见问题解答',
  ogTitle: '帮助中心 - 代码小库',
  ogDescription: '快速找到您需要的帮助信息',
})
</script>

<style scoped>
.expand-enter-active,
.expand-leave-active {
  transition: all 0.3s ease;
}

.expand-enter-from,
.expand-leave-to {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.expand-enter-to,
.expand-leave-from {
  opacity: 1;
  max-height: 500px;
}
</style>

